<template>
  <page-container>
    <a-spin :spinning="loading">
      <a-card :bordered="false" :bodyStyle="{ padding: '60px 30px' }">
        <a-row class="order-container" v-if="currentStep === 1">
          <a-col class="order-left" :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
            <h3 class="order-title">
              支付
              <span class="order-num">订单号/ 封签码 ({{ order.seal_code }})</span>
              <!-- <a-button
                class="primary-border-btn"
                :class="{ active: isJoinActivity }"
                style="float: right"
                @click="isJoinActivity = !isJoinActivity"
                >{{ user_status.activity.name }}</a-button
              > -->
				
				<a-select
					style="width: 120px; float: right; font-weight: normal;margin-left: 12px;"
					@change="handleChange"
					v-if="user_status.activity.length"
					placeholder="请选择活动"
					allowClear
					:disabled="is_edit || edit_price.length != 0"
				  >
					<a-select-option :value="item.id" v-for="item in user_status.activity" :key="item.id"
					  >{{ item.name }}
					</a-select-option>
				</a-select>
				<a-select style="width: 120px; float: right; font-weight: normal" v-model='platform' placeholder="请选择平台" allowClear >
				  <a-select-option value="1">美团</a-select-option>
				  <a-select-option value="2">抖音</a-select-option>
				</a-select>
            </h3>
            <div class="order-info-container">
              <div class="oredr-info-item">
                <p class="order-info-item-title">
                  合计
                  <!--<a-popconfirm @cancel="canceledit" @confirm="confirmedit = !is_edit" @visibleChange="visibleChange">
                    <template slot="title">
                      <div class="editinp">
                        <a-input placeholder="填写价格" type="number" v-model="edit_price" size="small" />
                      </div>
                    </template>
                    <span style="color: #0FA4FE"></span>
                  </a-popconfirm>-->

                  <span @click="is_edit = !is_edit" style="color: #0FA4FE;margin-left: 20px">修改价格</span>
                </p>
                <template v-if="!is_edit">
                  <!-- 选择活动时 -->
                  <template v-if="isJoinActivity && !edit_price">
                    <div class="order-info-item-content price">
                      {{ currentAct.price }}
                      <span class="origin-price">原价:{{ order.price.toFixed(2) }}</span>
                    </div>
                    <div class="order-info-item-tips">已使用活动折扣({{ currentAct.name }})</div>
                  </template>
                  <!-- 选择优惠券时 -->
                  <template v-else-if="payParams.discount_id && !edit_price">
                    <!-- 代金券 -->
                    <template v-if="currentDiscount.genre === 1">
                      <div class="order-info-item-content price">
                        {{ getDiscountPrice }}
                        <span class="origin-price">原价:{{ order.price.toFixed(2) }}</span>
                      </div>
                      <div class="order-info-item-tips">
                        已使用代金券折扣(满{{ currentDiscount.full_price }}减{{ currentDiscount.minus_price }})
                      </div>
                    </template>
                    <!-- 优惠券 -->
                    <template v-if="currentDiscount.genre === 0">
                      <div class="order-info-item-content price">
                        {{ getDiscountPrice }}
                        <span class="origin-price">原价:{{ order.price.toFixed(2) }}</span>
                      </div>
                      <div class="order-info-item-tips">已使用优惠券折扣({{ currentDiscount.discount }}折)</div>
                    </template>
                  </template>
                  <!--                <template v-else-if='user_status.vip.is_vip === 1'>-->
                  <!--                  <div class='order-info-item-content price'>-->
                  <!--                    {{ (order.price * (parseFloat(user_status.vip.vip_discount) / 10)).toFixed(2) }}-->
                  <!--                    <span class='origin-price'>原价:{{ order.price.toFixed(2) }}</span>-->
                  <!--                  </div>-->
                  <!--                  <div class='order-info-item-tips'>已使用会员折扣({{ user_status.vip.vip_discount }}折)</div>-->
                  <!--                </template>-->
                  <!-- 修改后的价格 -->
                  <template v-else-if="edit_price">
                    <div class="order-info-item-content price">{{ Number(edit_price).toFixed(2) }}</div>
                  </template>
                  <!-- 原价 -->
                  <template v-else>
                    <div class="order-info-item-content price">{{ order.price }}</div>
                  </template>
                </template>
                <!-- 修改价格时 -->
                <template v-else>
                  <div class="editinp">
                    <a-input placeholder="填写价格" type="number" v-model="edit_price" size="normal" style="margin-right: 10px" />
                    <a-button type="primary" size="normal" @click="is_edit = !is_edit" style="margin-right: 4px">确定</a-button>
                  </div>
                </template>
              </div>
              <div class="oredr-info-item">
                <p class="order-info-item-title">优惠券</p>
                <a-select
                  style="width: 80%"
                  placeholder="选择优惠券"
                  allowClear
                  v-model="payParams.discount_id"
                  :disabled="is_edit || edit_price.length != 0"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item, index) in user_status.discount"
                    :key="index"
                    :disabled="!item.discount && order.price < item.full_price"
                  >
                    {{ item | disCountGenreFilter }}
                  </a-select-option>
                </a-select>
              </div>
              <div class="oredr-info-item">
                <p class="order-info-item-title">姓名</p>
                <div class="order-info-item-content">{{ order.send_name }}</div>
              </div>
              <div class="oredr-info-item">
                <p class="order-info-item-title">电话</p>
                <div class="order-info-item-content">{{ order.send_mobile }}</div>
              </div>
            </div>
            <!-- <div class="order-verify-container">
              <p>点击获取验证码，短信将发送至安全手机 {{ order.send_mobile }} 进行验证：</p>
              <a-form>
                <a-row>
                  <a-col :span="18">
                    <a-form-item :wrapperCol="{ span: 24 }">
                      <a-input placeholder="如使用优惠券/余额支付，必须进行验证" v-model="payParams.code"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item style="text-align: center">
                      <code-button :mobile="order.send_mobile" :codeApi="clothesOfflineCode" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div> -->
            <div class="order-pay-container" >
              <a-row style="width: 100%" :gutter="[12, 12]" type="flex" justify="start">
                <a-col :xl="24" :xxl="10">
                 <!-- <div class="order-code-container">
                    <img src="../../assets/code.png" alt="" />
                    <a-input
                      placeholder="用户付款码"
                      v-model="payParams.pay_number"
                      :autoFocus="true"
                      @keyup.enter.native="barPay"
                    ></a-input>
                  </div> -->
                </a-col>
                <a-col :xl="24" :xxl="14">
                  <div class="order-pay-btns">
                    <!-- <a-button type="primary" @click.native="barPay">扫码支付</a-button> -->
                    <div class="prder-pay-btns-two">
                      <a-button @click.native="washPay">现金支付</a-button>
                      <!-- <a-button @click.native="walletPay">余额支付</a-button> -->
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-divider type="vertical"></a-divider>
          <a-col class="order-right" :xl="24" :xxl="12">
            <h3 class="order-title">下单列表</h3>
            <a-table
              :dataSource="list"
              :columns="columns"
              size="middle"
              style="margin-top: 20px"
              :pagination="false"
              rowKey="id"
            >
            </a-table>
            <!-- <a-descriptions bordered size="small" style="margin-top:20px" :column="2">
            <template v-for="item in list">
              <a-descriptions-item label="衣服" :key="item.id">{{ item.name }}</a-descriptions-item>
              <a-descriptions-item label="数量" :key="item.ctime">{{ item.num }}</a-descriptions-item>
            </template>
          </a-descriptions> -->
          </a-col>
        </a-row>
        <pay-success v-if="currentStep === 2" :order="orderSuccess"></pay-success>
      </a-card>
    </a-spin>
  </page-container>
</template>

<script>
import {
  clothesOfflineDetail,
  clothesOfflineWashPay,
  clothesOfflineBarPay,
  clothesOfflineWalletPay,
  clothesOfflineCode,
  clothesPayStatus,
} from '@/api/clothes'
import couponMixins from '@/mixins/coupon'
import codeButton from '@/components/code-btn/code-btn'
import paySuccess from './ClothesOfflinePaySuccess'

export default {
  name: 'ClothesOfflinePay',
  mixins: [couponMixins],
  components: {
    codeButton,
    paySuccess,
  },
  data() {
    return {
      clothesOfflineCode,
      currentStep: 1,
      seal_code: '',
      order: {},
      loading: false,
      orderSuccess: {},
	  platform:undefined,//选择的平台 1美团 2抖音
      isJoinActivity: false,
      currentAct: null,
      list: [],
      user_status: {
        discount: [], // 优惠券列表
        vip: {
          is_vip: 2, // 1是2不是
          vip_discount: 10, // vip折扣
        },
        topup_money: 0, // 充值钱包余额
        activity: [], // 活动列表
      },
      payParams: {
        discount_id: undefined, // 优惠券id
        code: '', // 验证码，如果使用优惠券则必须必填
        pay_number: '', // 支付码，微信以10、11、12、13、14、15，支付宝以28开头的18为数字
        out_trade_no: '', // 订单号
      },
      columns: [
        {
          title: '衣服',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '数量',
          dataIndex: 'num',
          align: 'center',
        },
        {
          title: '价格',
          dataIndex: 'price',
          align: 'center',
          customRender(text) {
            return '￥' + text
          },
        },
      ],
      edit_price: '', //修改价格
      is_edit: false, //是否修改价格
    }
  },
  created() {
    this.clothesOfflineDetail()
  },
  watch: {
    order(val) {
      this.payParams.out_trade_no = val.out_trade_no
    },
  },
  computed: {
    getDiscountPrice() {
      const genre = this.currentDiscount.genre
      //1是代金券 0是优惠券
      let price
      if (genre === 1) {
        price =
          this.order.price >= this.currentDiscount.full_price
            ? this.order.price - this.currentDiscount.minus_price
            : this.order.price
      } else if (genre === 0) {
        price = (this.order.price * this.currentDiscount.discount) / 10
      } else {
        price = this.order.price
      }
      return price.toFixed(2)
    },
    currentDiscount() {
      const discountList = this.user_status.discount
      const discountId = this.payParams.discount_id
      return discountList.find((item) => item.id === discountId)
    },
  },
  methods: {
    handleChange(id) {
      this.currentAct = this.user_status.activity.find((item) => item.id === id)
      this.isJoinActivity = !!id
    },
    
    clothesOfflineDetail() {
      const params = this.$route.query
      try {
        params.clothes = JSON.parse(params.clothes)
      } catch (error) {}
      clothesOfflineDetail(params).then((res) => {
        this.seal_code = res.data.seal_code
        this.order = res.data.order
        this.user_status = res.data.user_status
        //不显示重复的优惠券
         let arr = []
        for (var i = 0; i < res.data.user_status.discount.length; i++) {
          JSON.stringify(arr).indexOf(JSON.stringify(res.data.user_status.discount[i])) > -1
            ? ''
            : arr.push(res.data.user_status.discount[i])
            
        }
        this.user_status.discount = arr
        
        
        this.list = res.data.list.map((item) => {
          return {
            ...item,
            price: this.user_status.vip.is_vip === 1 ? item.vip_price : item.price,
          }
        })
      })
    },
    walletPay() {
      this.handlePay(clothesOfflineWalletPay)
    },
    timeInGetPayStatus() {
      const timer = setInterval(() => {
        clothesPayStatus({ out_trade_no: this.order.out_trade_no })
          .then((res) => {
            this.currentStep = 2
            this.orderSuccess = res.data
            clearInterval(timer)
          })
          .catch((err) => {
            this.currentStep = 2
            this.orderSuccess = res.data
            clearInterval(timer)
          })
      }, 2 * 60 * 1000)
    },
    washPay() {
      this.handlePay(clothesOfflineWashPay)
    },
    barPay() {
      this.handlePay(clothesOfflineBarPay)
      this.timeInGetPayStatus()
    },
    handlePay(payAction) {
      this.loading = true
      const params = this.getParams();
      return payAction(params)
        .then((res) => {
          this.currentStep = 2
          this.orderSuccess = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    getParams() {
      return Object.assign({}, this.payParams, {
        mobile: this.order.send_mobile,
        activity_id: this.isJoinActivity && this.currentAct.id,
        edit_price: this.edit_price,
		platform:this.platform,
      })
    },
    visibleChange(visible) {
      console.log(visible)
      if (visible) {
        this.is_edit = true
      } else {
        this.is_edit = false
      }
    },
    canceledit(e) {
      this.edit_price = ''
    },
    confirmedit(e) {},
  },
}
</script>

<style lang='less' scoped>
@import '~ant-design-vue/es/style/themes/default.less';
.ant-select-selection__placeholder{
	display:block!important;
}
.order-container {
  box-shadow: 0px 2px 10px 1px rgba(211, 211, 211, 0.5);
  border-radius: 20px;
  padding: 24px;
  display: flex;

  .order-left,
  .order-right {
    flex: 1;
  }

  .ant-divider-vertical {
    width: 4px;
    height: 654px;
    background: #f0f2f5;
    border-radius: 1px;
    margin: 0 24px;
  }

  .order-title {
    font-size: 16px;
    font-weight: bold;
  }

  .order-num {
    margin-left: 15px;
    font-size: 14px;
  }

  .order-info-container {
    display: flex;
    margin-top: 54px;

    .oredr-info-item {
      flex: 1;
      height: 80px;
      position: relative;
      text-align: center;
      .order-info-item-title {
        span {
          display: inline-block;
        }
      }
      &:not(:last-child):after {
        position: absolute;
        right: 0;
        top: 0;
        content: '';
        height: 100%;
        width: 1px;
        background: #e9e9e9;
      }

      .order-info-item-content {
        font-size: 16px;
        font-weight: bold;
        color: #000;
      }
      .editinp {
        display: flex;
        align-items: center;
        input {
          width: 60%;
        }
      }
      .price {
        &::before {
          content: '￥';
          font-size: 13px;
        }
      }

      .origin-price {
        color: #666;
        font-size: 14px;
        text-decoration: line-through;
        font-weight: normal;
      }

      .order-info-item-tips {
        color: @primary-color;
        font-size: 12px;
      }
    }
  }

  .order-verify-container {
    margin-top: 40px;
  }

  .order-pay-container {
    padding: 10px 20px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0px 0px 10px 1px rgba(@primary-color, 0.2);
    margin-top: 80px;

    .order-code-container {
      display: flex;
      align-items: center;

      img {
        width: 26px;
        height: 26px;
      }

      input {
        margin-left: 10px;
        // width: 200px;
      }
    }

    .order-pay-btns {
      // float: right;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .prder-pay-btns-two {
        display: flex;
        align-items: center;
        button {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
